<template>
  <Header :add-todo="addTodo"></Header>
  <List :todos="todo_list" :delete-item-at-index="deleteItemAtIndex" :set-finished-by-index="setFinishedByIndex"></List>
  <Footer :count="todo_list.length" :finished-count="finishedCount" :clear-finished-todo="clearFinishedTodo"
          :select-all-todos="selectAllTodos"></Footer>
</template>

<script>
import Header from "./components/Header.vue"
import List from "./components/List.vue"
import Footer from "./components/Footer.vue"

export default {
  name: 'App',
  data() {
    return {
      todo_list: [{"text": "Vue", "finished": false}, {"text": "Flutter", "finished": true}, {
        "text": "React",
        "finished": false
      },]
    }
  },
  methods: {
    deleteItemAtIndex(index) {
      this.todo_list.splice(index, 1)
    },
    setFinishedByIndex(index, finished) {
      this.todo_list[index].finished = finished
    },
    addTodo(todo) {
      this.todo_list.unshift(todo)
    },
    selectAllTodos(isSelected) {
      this.todo_list.forEach((todo) => {
        todo.finished = isSelected
      })
      console.log(this.todo_list)
    },
    clearFinishedTodo() {
      console.log("清除已完成任务")
      this.todo_list = this.todo_list.filter((todo) => {
        return !todo.finished
      })
    }
  },
  computed: {
    finishedCount() {
      let count = 0;
      this.todo_list.forEach(function (todo) {
        if (todo.finished) {
          count++;
        }
      })
      return count;
    }
  },
  components: {
    Header,
    List,
    Footer,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
